
<html xmlns="http://www.w3.org/1999/xhtml">

<wicket:extend>


    <!-- Sidebar -->

      <div style="position: relative; background-color: #2D475C; float:left; width: 200px; height: 600px;">
        <div style="padding-top: 10px; margin-left: auto; margin-right: auto; width: 176px;"> 
            <img wicket:id="sidebar" src="side-bar.png" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                <area shape="rect" coords="0,32,176,62" wicket:id="AquaponicsPageLink" href="#" />
                <area shape="rect" coords="2,62,175,92" wicket:id="LightingPageLink" href="#" />
                <area shape="rect" coords="1,92,175,122" wicket:id="SecurityPageLink" href="#" />
                <area shape="rect" coords="0,122,175,152" wicket:id="ClimatePageLink" href="#" />
                <area shape="rect" coords="1,153,175,183" wicket:id="WaterPageLink" href="#" />
            </map>
        </div>
        <div style="position: absolute; bottom: 0; padding: 10px;">
            <img wicket:id="logo" src="logo.png"/>
        </div>
      </div>
      
    <!-- Security Controls -->
    
<div class= "wrapper" style="position: relative; left: 196;  width: 800px;height: 600px;">
    <form wicket:id="form">
    
    <div class="SecuityPanel" style="position:absolute;width:337;z-indez:90;top:10;left:0; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
          <div align="center"><b><font size="5" color="white"><u><br/></u></font></b></div>
          <font size="4" color="white" >
          	  <b>System Status: </b>
          	</font>
          	<font size="5" color="green" >
          	<b><span wicket:id="status">[System status will go here]</span> </b></font>  	  
             <img wicket:id="keypad">
    </div>
    
    <div class="SecuityLabel" style=" width:335; height:40; position:absolute;z-indez:100;top:10;left:0; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    
    <div align="center"><b><font size="5" color="white">Security Control Panel</font></b></div>
    </div>
    
    <div class="StayLabel" style="height:40; width:120; position:absolute;z-indez:100;top:306;left:339; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center"><b><font size="5" color="white">STAY</font></b></div>
    </div>
    
    
    <div class="AwayLabel" style="height:40; width:120; position:absolute;z-indez:100;top:349;left:339; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center"><b><font size="5" color="white">AWAY</font></b></div>
    </div>
    
    
    <div class="PanicLabel" style="height:40; width:120; position:absolute;z-indez:100;top:392;left:339; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center"><b><font size="5" color="REd">PANIC</font></b></div>
    </div>
    
    
    <div class="lightLabel" style="height:40; width:120; position:absolute;z-indez:100;top:435;left:339; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center"><b><font size="5" color="orange">LIGHTS</font></b></div>
    </div>
    
    
    <div class="SirenLabel" style="height:40; width:120; position:absolute;z-indez:100;top:477;left:339; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center"><b><font size="5" color="orange">SIRENS</font></b></div>
    </div>
    
    
    <div class="screen" style="height:600px; width:800px; background:grey;opacity:.40; position:absolute;z-indez:100;top:0;left:0; border:2px gray solid;">
    </div>
    
    
    <div class="alert" style="height:200; width:250; background:white; position:absolute;z-indez:100;top:300;left:500; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
          <div align="center"><b><font size="5" color="black"><br/>Intruder Detected!<br/>Alert Police?</font></b></div>
      </div>
      
      <div class="alertbar" style="height:40; background:red; width:270;  position:absolute;z-indez:100;top:300;left:500; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    
          <div align="center"><b><font size="5" color="WHITE">! ALERT !</font></b></div>
          
      </div>
      
     <div class="yes" style="height:40; width:100; background:red; position:absolute;z-indez:100;top:450;left:525; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    
    <div align="center"><b><font size="5" color="white">Yes</font></b></div>
    
    </div>
    
    <div class="no" style="height:40; width:100; background:white; position:absolute;z-indez:100;top:450;left:650; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
    
    <div align="center"><b><font size="5" color="black">No</font></b></div>
    
    </div>



</form> 

<div class="house" style="position:absolute;z-indez:100;top:50;left:360;">
<img wicket:id = "house" width = 400%/>
</div>

</div>

</wicket:extend>
</html>
